<template>
  <div class="app-container">
    <div class="container-top-menu"></div>
    <div class="content">
      <Row :gutter="16">
        <Col :span="4">
          <Menu @on-select="toPage" :active-name="$route.name">
            <Submenu name="1">
              <template slot="title">
                <Icon type="ios-paper"/>
                ThreeJs
              </template>
              <MenuItem name="three_1">3d地球</MenuItem>
            </Submenu>
            <Submenu name="2">
              <template slot="title">
                <Icon type="ios-people"/>
                图片相关
              </template>
              <MenuItem name="domToImage">DOM转图片</MenuItem>
            </Submenu>
            <Submenu name="3">
              <template slot="title">
                <Icon type="ios-stats"/>
                JS相关
              </template>
              <MenuItem name="base64atob">base64编解码</MenuItem>
              <MenuItem name="appUpdate">app检测更新</MenuItem>
              <MenuItem name="IntersectionObserver">IntersectionObserver</MenuItem>
            </Submenu>
            <Submenu name="4">
              <template slot="title">
                <Icon type="ios-stats"/>
                H5小游戏
              </template>
              <MenuItem name="wuziqiCanvas">五子棋Canvas版</MenuItem>
            </Submenu>
          </Menu>
        </Col>
        <Col :span="20">
          <router-view class="yh-router-view"></router-view>
        </Col>
      </Row>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {}
    },
    created() {
    },
    methods: {
      toPage(path) {
        this.$router.push({name: path})
      }
    }
  }
</script>
<style scoped>
  .app-container{
    width: 100%;
    overflow-x: hidden;
  }
  .container-top-menu {
    height: 60px;
  }

  .yh-router-view {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    overflow: auto;
  }
</style>
